<template>
	<div class="Echarts">
		<div ref="myChart" id="myChart"  class="inMain" style="width: 418.48px;height: 267.06px;"></div>
	</div>
</template>

<script>
	export default {
		name: 'industry2',
		data() {
			return{
				cockpitData:[],
				data20:[],
				data19:[],
				up19:[],
				up20:[],
				itemTitle:[],
			}
		},
		methods: {
			
			async getList(){
				// 新材料细分行业利润总额
				var dt = {
					"params": {
						"normGuid": "1c41333d-76aa-48c6-8a1a-5fd74fe02fd5",
						"fieldList": []
					}
				};
				var _this = this;
				const total = await this.$api.post('dcockpit/rest/cockpitApi/searchListNormResult', dt)
				let {custom:{result}}={...total}
				_this.getTotalData(result)
				
				// 新材料细分行业利润同比
				var dt1 = {
					"params": {
						"normGuid": "23d1b86c-726c-4b43-a7e6-9c3f305e9c5f",
						"fieldList": []
					}
				};
				const tongbi = await this.$api.post('dcockpit/rest/cockpitApi/searchListNormResult', dt1)
				let {custom:{result:result1}}={...tongbi}
				_this.getTongbiData(result1)
				//更新图表
				this.$nextTick(()=>{
					this.myEcharts();
				});
			},
			getTotalData(result){
				let dataList=result.cockpitData
				let itemData = dataList.map(item=>{
					return item.index_value;
				});
				let itemTitle = dataList.map((item,index)=>{
					let index_name=item.index_name.replace('宁波市:新材料产业:','')
					if(index==0){
						return index_name.replace('利润','')
					}else if(index==3){
						return index_name.replace('利润','').replace('新','')
					}else{
						return index_name.replace('利润','').replace('新','').replace('材料','').replace('先进','')
					}
				});
				this.itemTitle = itemTitle.slice(0,4);
				this.data19 = itemData.slice(0,4);
				this.data20 = itemData.slice(5,9);
			},
			getTongbiData(result){
				let dataList=result.cockpitData
				let itemData = dataList.map(item=>{
					return item.index_value;
				});
				this.up20 = itemData.slice(0,4);
				this.up19 = itemData.slice(5,9);
			},
			
			myEcharts() {
				let myChart = this.$echarts.getInstanceByDom(this.$refs.myChart) ;
				let itemTitle=this.itemTitle;
				let itemData={bar19:this.data19,
							  bar20:this.data20,
							  line19:this.up19,
							  line20:this.up20}
				let colorArr = ["#70C1FF", '#FAE8DC']
				let dataList = []
				let ctime = '2020.12'
				for (var i=0;i<itemData['line20'].length;i++) {
					let label1;
					if(i==0||i== itemData['line20'].length-1){
						label1={
								show:true,
								position:'top',
								fontSize:16,
								fontWeight:'bold',
								color:'#F5BA25',
								formatter: Number(itemData['line20'][i]).toFixed(1)+'%'
							};
					}
					else  label1={show:false};
					dataList.push({
						name: itemTitle[i],
						value: itemData['line20'][i],
						label:label1,
					});
				}
				//配置图表
				if (myChart==null) {
				    myChart = this.$echarts.init(this.$refs.myChart);  //利用原型调取Echarts的初始化方法
				}
				const option = {
					// backgroundColor: 'rgba(3, 16, 38, 0.71)',
					tooltip: {
						trigger: 'axis',
						axisPointer: {
						    type: 'none'
						}
					},
					legend: {
						show: false,
					},
					title:{
						show:false
					},
					grid: {
						left: '8%',
						right: '8%',
						top: '25%',
						width: "84%",
						height:'65%',
						containLabel: true
					},
					xAxis: [{
						splitLine: {
							show: false
						},
						axisLine: {
							show: true,
							lineStyle:{
								type:'solid',
								color:'#B1B1B1',
								width:1
							}
						},
						axisTick :{
							show:false,
						},
						axisLabel: {
							color: '#DFF8FF',
							fontSize: 16,
							interval:0,
							margin: 15,
							fontWeight: 600
						},
						data: itemTitle,
						type: 'category',
						show: true,
					}],
					yAxis: [{
						splitLine: {
							show: true,
							lineStyle:{
								type:'dotted',
								color:'#556468',
								width:1
							}
						},
						axisLine: { //y轴
							show: true,
							lineStyle:{
								type:'solid',
								color:'#B1B1B1',
								width:1
							}
						},
						name:'单位：亿元',
						nameLocation: "end",
						nameTextStyle:{
							color:'#99C8FF',
							fontSize:15,
						},
						type: 'value',
						axisTick: {
							show: false
						},
						axisLabel: {
							color: 'rgba(255,255,255,0.6)',
							fontSize: 15,
							// margin: 10,
						},
						interval:40
					},{
						axisLine: { //y轴
							show: false,
						},
						splitLine: {
							show: false
						},
						name:'增值',
						nameLocation: "end",
						nameTextStyle:{
							color:'#99C8FF',
							fontSize:15,
							padding: [0, 0, 0, 40]
						},
						type: 'value',
						axisTick: {
							show: false,
						},
						axisLabel: {
							color: 'rgba(255,255,255,0.6)',
							fontSize: 15,
							margin: 10,
							// interval:50,
							// showMaxLabel:true,
							formatter: function (value, index) {
							    return value + '%';
							}
						},
						data:dataList,
						interval:20
					}
					],
					series: [
						{
						    type: 'bar',
						    name:'2019',
						    barWidth: 12,
						    data:itemData['bar19'],
							yAxisIndex: 0, 
							barGap:1.5,
							label: {
								show: true,
								position: 'top', // 位置
								color: '#f0ffff',
								fontSize: 15,
								// fontWeight:600,
								distance: 10, // 距离
								formatter: function(params){
									return params.data.toFixed(1)
								}
							}, // 柱子上方的数值
						    itemStyle: {
						      borderRadius:[4,4,0,0],
						      color:new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
						        [{
						          offset: 0, color: '#2682FF' // 0% 处的颜色
						        }, {
						          offset: 1, color: '#70C1FF' // 100% 处的颜色
						        }])
						    }
						  },
						  {
						    type: 'bar',
						    name:'2020',
						    barWidth: 12,
						    data:itemData['bar20'],
							yAxisIndex: 0, 
							// barGap:'115%',
							label: {
								show: true,
								position: 'top', // 位置
								color: '#f0ffff',
								fontSize: 15,
								fontWeight:400,
								distance: 10, // 距离
								formatter: function(params){
									// console.log(params)
									return params.data.toFixed(1)
								}
							}, // 柱子上方的数值
						    itemStyle: {
						      color:new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
						          [{
						            offset: 0, color: '#F5AF0F' // 0% 处的颜色
						          }, {
						            offset: 1, color: '#F5D75F' // 100% 处的颜色
						          }]),
						      borderRadius:[4,4,0,0]
						    }
						  },
						  {
						    type: 'line',
						    name:'2019', 
						    data:itemData['line19'],
							yAxisIndex: 1,
							color:colorArr[0]
						  },
						{
							type:'line',
						    name:'2020',
							data:dataList,
							yAxisIndex: 1, 
							
							color:colorArr[1]
						}
						]
				};
				myChart.setOption(option);  //将编写好的配置项挂载到Echarts上
			}
		},
		mounted() {
			// this.getData();
			// this.myEcharts();
			this.getList()
		}
	}
</script>


<style>

</style>
